<template>
	<view>
		<u-navbar title="">
			<u-search placeholder="搜索商品名称" v-model="keyword" @custom='submit'></u-search>
		</u-navbar>
		<view class="u-p-t-20" v-if="type">
			<u-divider>{{type}}</u-divider>
		</view>
		<view class="u-p-20">
			<w-list :list='dataList' :status='status'>
				<template>
					<view v-for="(item,index) in dataList" :key="index">
						<w-shop-item :item='item'></w-shop-item>
					</view>
				</template>
			</w-list>
		</view>
	</view>
</template>

<script>
	import {
		getGoodsSearchNew,getGoodsSearchHot,getGoodsSearch
	} from '@/api/shop.js'
	import {
		$shopImgUrl
	} from '@/service/request.js'
	export default {
		data() {
			return {
				keyword: '',
				status:'loadmore',
				dataList: [],
				type:'',
				pageNo:1,
				searchPageNo:1,
				isSearch:false
			}
		},
		onLoad(e) {
			if(e.type){
				this.type = e.type
			}
			this.init(this.type)
		},
		onPullDownRefresh() {
			this.dataList = []
			if(this.isSearch){
				this.searchPageNo = 1
				this.submit()
			}else{
				this.pageNo = 1
				this.init(this.type)
			}
		},
		onReachBottom() {
			this.status='loading'
			if(this.isSearch){
				this.searchPageNo++
				this.submit()
			}else{
				this.pageNo++
				this.init(this.type)
			}
		},
		methods: {
			submit(val){
				console.log(val)
				if(val.trim()==''){
					this.$u.toast('请输入商品名称')
					return
				}
				if(!this.isSearch){
					this.isSearch = true
					this.dataList = []
				}
				getGoodsSearch({name:val,pageNo:this.searchPageNo,pageSize:10}).then(res=>{
					const arr = res.list.map(item=>{
						return {
							src: $shopImgUrl + item.pic,
							...item
						}
					})
					if(arr.length==10){
						this.status = 'loadmore'
					}else{
						this.status = 'nomore'
					}
					this.dataList = this.dataList.concat(arr)
				})
			},
			init(type){
				if(type){
					if(type=='热门商品'){
						this.getGoodsSearchHot()
					}else{
						this.getGoodsSearchNew()
					}
				}else{
					this.getGoodsSearchHot()
				}
			},
			getGoodsSearchHot(){
				getGoodsSearchHot({pageNo:this.pageNo,pageSize:10}).then(res=>{
					const arr = res.list.map(item=>{
						return {
							src: $shopImgUrl + item.pic,
							...item
						}
					})
					if(arr.length==10){
						this.status = 'loadmore'
					}else{
						this.status = 'nomore'
					}
					this.dataList = this.dataList.concat(arr)
				})
			},
			getGoodsSearchNew(){
				getGoodsSearchNew({pageNo:this.pageNo,pageSize:10}).then(res=>{
					const arr = res.list.map(item=>{
						return {
							src: $shopImgUrl + item.pic,
							...item
						}
					})
					if(arr.length==10){
						this.status = 'loadmore'
					}else{
						this.status = 'nomore'
					}
					this.dataList = this.dataList.concat(arr)
				})
			},
		}
	}
</script>

<style>

</style>
